<!DOCTYPE html>
<html lang="zh-CN" height: 100%>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
<link rel="stylesheet" href="../css/liMarquee.css">

<style>
	*{
		margin:0;padding:0;
		font-family:'微软雅黑';	
	}
	#top-title{
		width:100vw;
		height:4.7vh;
		display: flex;
		font-size:12px;
	}
	#top-title .count{
		font-size:16px;
	}
	
	.title{
		width:45.5vw;
		height:4.7vh;
		line-height: 4.7vh;
		color:#fff;
		font-size:12px;
		margin-left:8.5vw;
		font-family: "微软雅黑";
		display: flex;
	}
	.title span{
		font-size: 12px;
		color: #df6d31;
		margin-left:1.5vw;
	}
	.title-count{margin-left:19vw}
	.dowebok { width: 100vw; height: 100vh;background: none;margin-top:5vh;}
	.dowebok ul { width: 100vw;margin: 0; line-height: 4vh;}
	.dowebok ul li { list-style: none; color: #FFF;width:82vw;height:15.5vh; font-size: 14px;/* border: 1px solid #fff; */
	margin-left:9.7vw;
	display: flex;
	}
	.dowebok ul li:nth-child(odd) { 
		background:#081c51;
	}
	.photo{
		width:36.7vw;
		height: 15.5vh;
		margin-left:2vw;
		display: flex;
		justify-content: space-between;
	}
	.photo .photo-img{
		display: block;
		width:15vw;
		height: 12vh;
		margin-top:2vh;
		/* border:1px solid #f00; */
		margin-left:1vw;
		z-index: 99999;
		overflow: hidden;
		border-radius: 50%;
		background: url(../img/组7.png)no-repeat;background-size: 100% 100%;
	}
	.photo .photo-img img{
		display: block;
		width:12vw;
		height: 10vh;
		z-index: 1;
		margin-top:1vh;
		margin-left:1.6vw;
		border-radius: 50%;
	}
	.photo p{
		width:18.2vw;
		height: 15.5vh;
		margin-left:1.8vw;
	}
	.photo p span{
		display: block;
		padding-left:3.5vw;
		font-size:12px;
		
	}
	.photo p span:first-child{
		display: block;
		width:25vw;
		margin-top:3.5vh;
		margin-bottom:2vh;
		background: url(../img/形状692.png)no-repeat left center;
		padding-left:3vw;
	}
	.photo p span:last-child{
		background: url(../img/形状693.png)no-repeat left center;
		padding-left:4vw;
		width:25vw;
	}
	.photo-time{
		width:25.5vw;
		height: 15.5vh;
		margin-left:13.5vw;
		/* border: 1px solid #ccc; */
	}
	.photo-time p{
		background: url(../img/形状694.png)no-repeat left center;
		font-size: 12px;
		padding-left:4vw ;
		margin-top:3.3vh;
	}
@media screen and (max-width:2000px) {
	
}
@media screen and (max-width:1680px) {
	 
}
@media screen and (max-width:1600px) {
	.title span{
		font-size: 12px;
	}
	.photo p span{
		font-size:10px;
	}
	.photo-time p{
		font-size: 10px;;
	}
}
@media screen and (max-width:1440px) {
	.photo p span{
		font-size:8px;
	}
	.photo-time p{
		font-size: 8px;
	}	
}
@media screen and (max-width:1400px) {
	.title span{
		font-size: 8px;
	}
	.photo p span{
		font-size:8px;
	}
	.photo-time p{
		font-size: 8px;
	}	
}	
@media screen and (max-width:1366px) {
	.title span{
		font-size: 8px;
	}
			
}
@media screen and (max-width:1360px) {
	.title span{
		font-size: 8px;
		
	}		
}
	/* .title span{
		font-size: 12px;
		font-family:'微软雅黑';
	} */
.photo p span{
		display: block;
		padding-left:3.5vw;
		font-size:12px;
		
	}
.photo-time p{
		background: url(../img/形状694.png)no-repeat left center;
		font-size: 12px;
		padding-left:4vw ;
		margin-top:3.3vh;
	}
</style>
</head>

<body>
<!-- <h1>向上滚动</h1> -->

<div id="top-title">
	<p class="title">档案实时数据</p>
	<p class="title title-count">档案总计<span class="count"></span><span>例</span></p>
</div>

<div class="dowebok" style="font-size: 0px!important;">
	<ul class="dowebokUl">
	</ul>
</div>

<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/jquery.liMarquee.js"></script>

<script>
	
$(function(){
	$('.dowebok').liMarquee({
		isMarquee:false,
		isEqual:false,
		scrollDelay:50,
		controlBtn:{up:'#goUM',down:'#goDM'},
		direction: 'up'
	});
});
	 $.ajax({
		url:'http://192.168.1.27:8080/MetisManage/dataAuth/findCustomerCaseGroup',
		type:'GET',
		 async:false,//false;
		success: function (res) {
			var data=res.records[0]
			var list=data.casegroupList
			var reg= new RegExp("/","g");
			$('.count').html(data.count.groupNum)
			for(var i=0;i<list.length;i++){
				$(".dowebokUl").append('<li>'+
					'<div class="photo">'+
						'<span class="photo-img"><img src="'+list[i].clientImg+'" ></span>'+
						'<p>'+
							'<span>'+list[i].cname+'</span>'+
							'<span>'+list[i].dmname+'</span>'+
						'</p>'+
					'</div>'+
					'<div class="photo-time">'+   
						'<p>'+new Date(list[i].createtime).toLocaleDateString().replace(reg, '-')+'</p>'+
					'</div>'+
				'</li>')
			}
		}
	});

</script>

</body>
</html>